<template>
	<div class="gc">
		<slider cname="gc-slider" :banners="images" v-if="images.length>0"></slider>
		<img src="/img/banner/banner3.jpg" alt="" />
		<panel-lc :lc-list="lcList" :panelTitle="panelLcTitle"></panel-lc>
		<panel :title="titleList3" cname="cnameList3">
			<ul v-for="(item, key) in jcList" :key="key">
				<li><img :src="item.src" alt="" /></li>
				<li>
					<h4>{{ item.title }}</h4>
					<p>{{ item.desc }}</p>
				</li>
				<li>
					<router-link to="/" >
						<span>
							查看评论
						</span>
						
					</router-link>
				</li>
			</ul>
		</panel>		
		<v-footer>
			<div class="slot-class">
				<div>
					<p>每天推送不一样的精彩栏目</p>
					<p>让你体验更美好的生活</p>
				</div>
				<img src="/img/slider-list/list-img2.png" alt="">
			</div>
		</v-footer>
	</div>
</template>

<script>
	let that
import Slider from '../core/slider.vue';
import PanelLc from '../core/lc.vue';
import Panel from '../core/panel.vue';
import VFooter from '../footer/index.vue';

export default {
	
	components: {
		Slider,
		PanelLc,
		Panel,
		VFooter
	},
	data() {
		return {
			objProvideTitle:{title:"a"},
			images:[],
			panelLcTitle:"",
			lcList:[],
			titleList3:"",
			jcList:""
		};
	},
	mounted(){
		that = this
		this.$http.get("/api/gc.json").then(req=>{
			that.images = req.data.images
			that.panelLcTitle = req.data.panelLcTitle
			that.lcList = req.data.lcList
			that.titleList3 = req.data.titleList3
			that.jcList = req.data.jcList
		})
	}
};
</script>

<style lang="scss">
.gc {	
	.slot-class{
		border-radius: 20px;
		background-color: #fff;
		margin-bottom: 20px;
		>div{
			width: 70%!important;
			text-align: center!important;
		}
		>img{
			padding-left: 0!important;
		}
	}
	.gc-slider {
		margin-top: 10px;
		img {
			width: 100%;
		}
	}
	> img {
		width: 100%;
	}
	.lc {
		.lc-txt {
			h3 {
				span {
					font-size: 28px;
				}
			}
		}
	}
	.cnameList3 {
		padding:20px;
		ul {
			border-bottom:1px solid #f1f1f1;
			padding: .2rem 0;
			display: flex;
			box-sizing: border-box;
			font-size: 26px;
			img {
				width: 100%;
				display: block;
			}
			>li {
				line-height: 60px;
				width:50%;
				p{
					color: #F04752;
				}
				&:first-child {
					width: 20%;
				}
				&:last-child {
					width:28%;
					text-align: right;
					line-height: 120px;
					a{
						color: #f70;
						&:after{
							content:">"
						}
						
					}
				}
			}
		}
	}
}
</style>
